<template>
  <ul class='list'>
    <li v-for="(item,index) in getListData">
      <p>
        <span class="title">{{item.title}}</span>
        <span>{{item.time}}</span>
        <span :class="{'fr':true,'color-green':item.type==1,'color-red':item.type==0}">{{item.num | formatNum}}</span>
      </p>
    </li>
  </ul>
</template>
<script>
export default {
  props:["listData"],
  components: {},
  name: "",
  data() {
    return {};
  },
  computed:{
    getListData(){

      return this.listData||[]
    }
  },
  filters:{
    formatNum(num){

      return ( num>0?"+":"")+num
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0 15px;
  font-size: 14px;
  color: #333;

  li{
    padding: 15px 0px;
    border-bottom: 1px solid #f2f2f2;
  }

  p{
    line-height: 22px;

    .title{
      display: block;
    }

    span:nth-child(2){
      color: #999;
      font-size: 12px;
    }
    .fr{
      font-size: 16px;
      margin-right: 20px;
      transform: translateY(-10px)
    }
  }
}
</style>